<template>
	<view style="width: 100%;height: 100%;">

		<u-cell-group :border="false">
			<u-cell-item :value="value" @click="open" :arrow="arrow" :border-bottom="false" arrow-direction="right"
				style="padding: 0;">
			</u-cell-item>
		</u-cell-group>
		<!-- <u-input v-model="value" type="select" @click="sheetShow=true" input-align="right" :placeholder="placeholder" /> -->
		<!-- <u-action-sheet :list="type" v-model="sheetShow" @click="actionSheetCallback"></u-action-sheet> -->
		<u-select v-model="sheetShow" mode="single-column" :list="type" @confirm="actionSheetCallback"
			:value-name="valueName" :label-name="labelName" :safe-area-inset-bottom="true">
		</u-select>
	</view>
</template>

<script>
	export default {
		name: "qzl-dict",
		props: {
			type: {
				type: Array,
			},
			name: {
				type: String,
				default: ''
			},
			valueName: {
				type: String,
				default: 'dictValue'
			},
			labelName: {
				type: String,
				default: 'dictLabel'
			},
			dictClick: {
				type: Boolean,
				default: false
			},
			arrow: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				sheetShow: false,
				value: '',
				lists: [],
			};
		},
		created() {
			this.value = '请选择' + this.name
		},
		methods: {
			init(val) {
				console.log(this.type, val, 'valvalval');
				this.value = this.type.filter(it => {
					return it[this.valueName] == val
				})[0][this.labelName]
			},
			//处理按钮
			actionSheetCallback(index) {
				this.value = index[0].label
				this.$emit('dict', index[0].value, index[0].label)
				// this.value = this.type[index].dictLabel
				// this.$emit('dict', this.type[index].dictValue, this.type[index].dictLabel)
			},
			open() {
				if (this.dictClick) {
					this.$emit('dict')
				} else {
					this.sheetShow = true
				}
			}
		},


	}
</script>

<style scoped>
	::v-deep .u-cell__value {
		/* font-size: 1rem; */
		color: #333;
	}
</style>